<template>
	<div class="list-wrap" style="background-color:#f0f0f0;position:relative;" v-wechat-title="$route.meta.title = seoTitle">
        <header-view></header-view>
		<section class="search-body">
		    <div class="text-body">
                <div style="position:relative;">
                    <a class="city" href="javascript:void(0)" @click='upbtn'>
                        <span class="txt">土地</span>
                        <i class="icon"></i>
                    </a>
                    <div class="up-down" v-if='openUp'>
                        <router-link to="/houseList/0">租厂房</router-link>
                        <router-link to="/houseList/1">售厂房</router-link>
                    </div>
                </div>
		        <i class="icon-search"></i>
		        <input class="text" id="search-entry" readonly type="text" placeholder="你想找的土地" @click="searchOpen"/>
		    </div>
		</section>
        <section><div style="padding:0 15px 15px 15px;background-color:#f9f9f9;text-align:center;">总共筛选出<span style="color:#506cf7;margin:0 6px;font-weight:bold;">{{ totalNum }}</span>条数据</div></section>
		<section class="layer-tip hide js-layer-tip" style='z-index:2100'>
		    <div class="tip-body">
		        <div class="info " id="message"></div>
		    </div>
		</section>
		<!--拼接之后的筛选头-->
		<section class="filter-body js-filter-title">
		    <a class="items js-title-region" href="javascript:void(0);" @click="regionBtn">
		        <span class="txt ellips">{{ cityFirst == 0 ?'区域':cityFirst }}</span><i class="icon"></i>
		    </a>
            <a class="items js-title-more" href="javascript:void(0);" @click="areaBtn">
                <span class="txt ellips">{{ areaValueAfter == 0?'面积':areaValueAfter }}</span><i class="icon"></i>
            </a>
            <!-- <a class="items js-title-more" href="javascript:void(0);" @click="typeBtn">
                <span class="txt ellips">{{type === 0 ? '出租' : '出售'}}</span><i class="icon"></i>
            </a> -->
		</section>
		<article x="true" class="article-body" data-has-more="true">
		    <div class="house-list" v-show="houseNum">
		         <router-link :to="{name:'landDetail',params:{id:house.id}}" class="items" v-for="(house,key) in houses" :key="key">
		            <div class="pic-box" style="position:relative;">
		                <img :src="house.logo"
		                     alt=""/>
		                <span class="land-tag" v-if="house.owner_release != 0">业主</span>
		            </div>
		            <div class="info-box">
		                <p class="tit" v-html="house.title"></p>
		                <p class="info ellips">
		                	<span v-if="house.land_use">{{ house.land_use.name }}/</span>
		                	<span v-if="house.area">{{ house.area }}㎡</span>
		                	<!-- <span v-if="house.park">{{ house.park.title }}/</span> -->
		                	<span v-if="house.park">/{{ house.park.city }}{{ house.park.city_first }}{{ house.park.city_second }}</span></p>
		                <p class="area ellips" v-if="house.property == 0 ">
			                <span v-if="house.rent == 0">
			                	<em class="price">面议</em>
			                </span>
			                <span v-if="house.rent !=0">
			                	<em class="price">租金：{{ house.rent }}</em>
		                    	<small class="unit">元/㎡</small>
			                </span>
		                </p>
		                <p class="area ellips" v-if="house.property == 1 ">
		                	 <span v-if="house.price == 0">
			                	<em class="price">面议</em>
			                </span>
			                <span v-if="house.price !=0">
			                	<em class="price">售价：{{ house.price }}</em>
		                    	<small class="unit">元/㎡</small>
			                </span>
		                </p>
		                <div class="tag-box" v-if="house.tag[0] != ''">
		                    <span class="tag tag-red" v-for="(tag,index) in house.tag"  v-if="index < 3">{{ tag }}</span>
		                </div>
		            </div>
		        </router-link>
		    </div>
		    <div class="no-data" v-show="!houseNum">
				<div class="pic"><img src="../assets/images/no-data.png"></div>
				<div>
				<div class="tip">没有找到相应的土地</div>
				<div class="tip">换个条件试试吧</div>
				</div>
			</div>
			<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" class="clearfix">
                <div class="lds-css" v-if="loadData && houseNum">
                    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                </div>
                 <div class="no-data" v-if="noData">暂无更多数据</div>
            </div>
    	</article>
    	<section class="filter-layer" v-show="filter">
		    <div class="filter-body">
		        <a class="items" :class="{current:regionOpen}" href="javascript:void(0);" @click="regionBtn">
		            <span class="ellips">区域</span><i class="icon"></i>
		        </a>
                <a class="items" :class="{current:areaOpen}" href="javascript:void(0);" @click="areaBtn">
                    <span class="ellips">面积</span><i class="icon"></i>
                </a>
              <!--   <a class="items" :class="{current:typeOpen}" href="javascript:void(0);" @click="typeBtn">
                    <span class="ellips">{{type === 0 ? '出租' : '出售'}}</span><i class="icon"></i>
                </a> -->
		    </div>
		     <!--一级-->
		    <div class="filter-list" v-show="regionOpen">
		        <div class="content">
		            <div class="slide-body parent" js-plugin="slide" data-direction="vertical">
		                <div class="slide">
		                    <!--二级-->
		                    <a class="items current js-region-first" k="" v="" def="区域" data-subcontent="region">区域</a>
		                </div>
		            </div>
		            <!--二级-->
		            <div class="slide-body subcontent js-subcontent-region" js-plugin="slide" data-direction="vertical" style="overflow-y: scroll;">
		                <div class="slide" data-number="0" data-v="">
                            <a class="items js-region-area" :class="{current:iscityActive}" @click="noCity">不限</a> 
		                   <a class="items js-region-area" :class="{current:(firstIndex == index)}" v-for="(region,index) in regions" :key="index" @click="firstId(index,region.id,region.title)">{{ region.title }}</a>
		                </div>
		            </div>
		            <div class="slide-body childcontent js-subcontent-tianhe" js-plugin="slide" data-direction="vertical" :style="{display:regionSecondOpen}" style="overflow-y: scroll;">
		                <div class="slide" data-number="0" data-v="">
		                    <a class="items js-sub-region" v-for="(regionSecond,index) in regionsSecond" :key="index" @click="secondId(index,regionSecond.id,regionSecond.title)" :class="{current:(secondIndex == index)}">
		                        <span class="txt ellips">{{ regionSecond.title }}</span>
		                    </a>
		                </div>
		            </div>
		        </div>
		        <div class="complete-body">
		            <a class="items cancel js-sub-region-cancel" href="javascript:;" @click="cityClose">重置</a>
		            <a class="items ok js-sub-region-ok" href="javascript:;" @click="houseGetRegion()">完成筛选</a>
		        </div>
		    </div>
            <div class="filter-list js-screening-more" v-show="areaOpen">
                <div class="checkbox-body">
                    <div class="slide-body" js-plugin="slide" data-direction="vertical">
                        <div class="slide">
                            <!--二级-->
                            <div class="options more js-multiple" data-k="areas" data-v="">
                                <!--<div class="tit">面积</div>-->
                                <div class="items-box">
                                    <a class="items" :class="{current:isareaActive}" @click="noArea">不限</a>
                                    <a v-for="(areaList,index) in areaLists" :key="index" class="items" :class="{current:(indexs == index)}" @click="selectArea(areaList.id,index,areaList.value)">{{ areaList.value }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="complete-body">
                    <a class="items cancel js-more-cancel" href="javascript:void(0);" @click="AreaClose">重置</a>
                    <a class="items ok js-more-ok" href="javascript:void(0);" @click="houseGetArea()">完成筛选</a>
                </div>
            </div>
            <div class="filter-list js-screening-more" v-show="typeOpen">
                <div class="content">
                    <div class="slide-body parent">
                        <div class="slide js-house-type-parent">
                            <a class="items" href="javascript:;" :class="{'current': type === 0}" @click="selectType(0)">
                                <span class="txt ellips">出租</span><i class="icon iconfont" :class="{'icon-yixuanze': type === 0, 'icon-weixuanze': type !== 0}"></i>
                            </a>
                            <a class="items" href="javascript:;" :class="{'current': type !== 0}" @click="selectType(1)">
                                <span class="txt ellips">出售</span><i class="icon iconfont" :class="{'icon-yixuanze': type !== 0, 'icon-weixuanze': type === 0}"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <!--<div class="complete-body">
                    <a class="items cancel js-more-cancel" href="javascript:void(0);" @click="AreaClose">重置</a>
                    <a class="items ok js-more-ok" href="javascript:void(0);" @click="houseGetArea()">完成筛选</a>
                </div>-->
            </div>
		</section>
		<section class="search-layer" v-show="search">
		    <div class="search-body">
		        <form class="text-body" target="#" method="post" id="search_from" action="javascript:;">
		            <i class="icon-search"></i>
		            <input class="text js-search-input" type="search" name="search" id="search" v-model="searchKey" @keyup.enter="houseGetKey()"/>
		            <a class="clear-text" href="javascript:;"></a>
		        </form>
		        <a class="cancel" id="search-cancel" href="javascript:;" @click="searchClose">取消</a>
		    </div>
		   <div class="search-recommend" v-for="keyList in keyList" style="padding:5px 15px;" @click="getKey(keyList)">
                <span class="tip js-searchRecommendResult">{{ keyList }}</span>
            </div>
		    <div class="search-list" js-plugin="slide" data-direction="vertical">
		        <div class="slide ">
		            <div class="js-search-items">
		            </div>
		            <a class="clear-record" href="javascript:;" @click="clearKey">清空历史记录</a>
		        </div>
		    </div>
		</section>
        <footer-view1></footer-view1>
		<footer-view></footer-view>
        <bottom></bottom>
		<div class="overlay" ref="overlay" v-show="overlay" @click="overlayClose"></div>
		<section class="fixed-tools">
		    <a class="items order-by " href="javascript:void(0);" @click="toolBtn">排序</a>
		    <a class="items go-top" style="display:none;" href="javascript:void(0);" id="to-top-btn" @click="toTop">顶部</a>
		</section>
		<section class="orderby-layer" :style="{ display: orederby }">
		    <a href="javascript:void(0)" class="items" :class="{ current:orderIndex === index }" v-for="(order,index) in orders" @click="orderBtn(order.sort_type,order.sort,index)">
		    	<span class="txt">{{ order.txt }}</span>
		    	<i class="icon iconfont" :class="order.icon"></i>
		    </a>
		</section>
	</div>
</template>

<script>
    import bottom from '../components/public/bottom'
    export default {
        name: 'houseList',
        components:{bottom},
        data() {
            return {
                overlay: false,
                search: false,
                keyword: true,
                orederby: 'none',
                filter: false,
                regionOpen: false,
                areaOpen: false,
                typeOpen: false,
                current: false,
                areaLists: {},
                houses: [],
                houseNum: 'true',
                areaID: '',
                areaValue:'',
                areaValueAfter:'',
                indexs: -1,
                firstIndex: -1,
                secondIndex: '',
                cityFirstIDBefore: '',
                cityFirstID: '',
                cityFirst: '',
                cityFirstTmp: '',
                citySecondIDBefore: '',
                citySecondID: '',
                citySecond: '',
                citySecondTmp: '',
                searchKey: '',
                 keyList:localStorage.getItem('keyLandList')?localStorage.getItem('keyLandList').split(','):[],
                regions: [],
                regionsSecond: [],
                regionSecondOpen: 'none',
                orderIndex: '',
                sort_type: '',
                sort: '',
                type: 0,
                page: 1,
                busy: true,
                noData: false,
                loadData: true,
                openUp:false,
                iscityActive:true,
                isareaActive:true,
                totalNum:'',
                orders: [
                    {txt: '默认排序', icon: '', sort_type: '', sort: ''},
                    {txt: '新发布在前', icon: '', sort_type: 'created_at', sort: 'desc'},
                    {
                        txt: '价格从低到高',
                        icon: 'icon-asc',
                        sort_type: 'rent' ,
                        sort: 'asc'
                    },
                    {
                        txt: '价格从高到低',
                        icon: 'icon-desc',
                        sort_type: 'rent',
                        sort: 'desc'
                    },
                    {txt: '面积从小到大', icon: 'icon-asc', sort_type: 'area', sort: 'asc'},
                    {txt: '面积从大到小', icon: 'icon-desc', sort_type: 'area', sort: 'desc'}
                ]
            };
        },
        computed: {
            selectedCity(){
                 return this.$store.state.city.city_title
             },
             selectedId(){
                 return this.$store.state.city.city_id
             } , 
            seoTitle() {
                let tt = '中山厂房网-提供中山厂房出租，中山厂房出售信息';
                // let area = '';
                // if (this.citySecond) {
                //     area = this.citySecond;
                // } else if (this.cityFirst) {
                //     area = this.cityFirst;
                // } else {
                //     area = this.selectedCity;
                // }
                // if (this.type === 0) {
                //     tt += area + '土地出租 - ';
                //     tt += area + '土地出租网';
                // } else {
                //     tt += area + '土地出售 - ';
                //     tt += area + '土地出售网';
                // }
                // tt += ' - 中山';
                return tt
            }
        },
        created() {
            this.type = parseInt(this.$route.params.type);
            this.areaGet();
            this.regionGet();
            this.houseGet();
        },
        mounted() {
            window.addEventListener('scroll', this.scrollToTop);
        },
        destroyed() {
            window.removeEventListener('scroll', this.scrollToTop);
        },
        methods: {
            upbtn(){
                this.openUp = !this.openUp
            },
            scrollToTop(el) {
                let topBtn = document.getElementById('to-top-btn');
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                let browserHeight = window.outerHeight;
                if (scrollTop > browserHeight / 3) {
                    topBtn.style.display = 'flex';
                } else {
                    topBtn.style.display = 'none';
                }
            },
            toTop() {
                window.scrollTo(0,0);
            },
            regionGet() {
                this.$get('/api/city/' + this.selectedId).then(res => {
                    if (res.code === 0) {
                        this.regions = res.data.children;
                        console.log(this.regions);
                    }
                });
            },
            firstId(v, n, t) {
                this.cityFirstTmp = t;
                this.cityFirstIDBefore = n;
                this.citySecondIDBefore = '';
                this.firstIndex = v;
                this.firstTitle = t;
                this.iscityActive = false
                this.regionsSecond = this.regions[v].children;
                if(this.regionsSecond.length != 0){
                   this.regionSecondOpen = 'block';                    
                }
            },
            secondId(v, n, t) {
                this.citySecondTmp = t;
                this.secondIndex = v;
                this.citySecondIDBefore = n;
                this.citySecondID = n;
            },
            noCity(){
                this.iscityActive = true
                this.firstIndex = -1
            },
            noArea(){
                this.isareaActive = true
                this.indexs = -1
            },
            areaGet() {
                this.$get('/api/landArea').then(res => {
                    console.log(res.data)
                    if (res.code === 0) {
                        this.areaLists = res.data;
                    }
                });
            },
            selectArea(v, n,m) {
                this.areaValue = m;
                this.areaID = v;
                this.indexs = n;
                this.isareaActive = false
            },
            cityClose() {
                this.filter = false;
                this.overlay = false;
                this.firstIndex = -1;
                this.secondIndex = -1;
                this.cityFirstID = '';
                this.citySecondID = '';
                this.cityFirst = '';
                this.citySecond = '';
                this.page = 1;
                this.houseGet();
                this.overlayClose()
            },
            AreaClose() {
                this.filter = false;
                this.overlay = false;
                this.indexs = 0;
                this.areaValueAfter = '';
                this.areaID = '';
                this.page = 1;
                this.houseGet();
                this.overlayClose()
            },
            selectType(id) {
                this.type = id;
                this.page =1;
                this.noData = false;
                this.loadData = true;
                this.busy = true;
                this.houseGet();
                this.overlayClose()
            },
            houseGet(flag) {
                this.$get('/api/land', {
                    city_id: this.selectedId,
                    area_land: this.areaID,
                    area_id: this.cityFirstID,
                    area1_id: this.citySecondID,
                    search_key: this.searchKey,
                    sort_type: this.sort_type,
                    sort: this.sort,
                    page: this.page
                }).then(res => {
                    this.totalNum = res.meta.total;
                    console.log(res.data);
                    this.filter = false;
                    this.overlay = false;
                    this.search = false;
                    if (flag) {
                        this.houses = this.houses.concat(res.data);
                        if (res.data.length === 0) {
                            this.busy = true;
                            this.noData = true;
                            this.loadData = false;
                        } else {
                            this.busy = false;
                        }
                    } else {
                        this.houses = res.data;
                        this.busy = false;
                        if (this.houses == '') {
                            this.noData = false
                            this.busy = true
                        }else{
                            this.loadData = false
                        }
                    }
                    this.houseNum = this.houses != '';
                });
                 if(this.searchKey != ''){
                    var reg = new RegExp(this.searchKey,"g")
                    for(var i=0;i<this.houses.length;i++){
                    this.houses[i].title = this.houses[i].title.replace(reg,"<span style='color:red;'>"+this.searchKey+"</span>")
                }
                }
            },
            loadMore() {
                this.busy = true;
                this.loadData = true;
                setTimeout(() => {
                    this.page++;
                    this.houseGet(true);
                }, 500);
            },
            houseBeginGet(n) {
                this.$router.push('/houseList/' + n);
                this.$router.go(0);
            },
            overlayClose() {
                this.filter = false;
                this.overlay = false;
                this.orederby = 'none';
                document.getElementsByTagName('html')[0].removeAttribute('style');
                document.getElementsByTagName('body')[0].removeAttribute('style');
            },
            overlayOpen() {
                document.getElementsByTagName('html')[0].style.height = '100%';
                document.getElementsByTagName('html')[0].style.overflow = 'hidden';
                document.getElementsByTagName('body')[0].style.height = '100%';
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            },
            searchOpen() {
                this.search = true;
            },
            searchClose() {
                this.search = false;
                this.searchKey = '';
            },
            toolBtn() {
                this.orederby = 'block';
                this.overlay = true;
                this.overlayOpen();
            },
            regionBtn() {
                this.filter = true;
                this.overlay = true;
                this.regionOpen = true;
                this.areaOpen = false;
                this.typeOpen = false;
                this.overlayOpen();
            },
            areaBtn() {
                this.filter = true;
                this.overlay = true;
                this.areaOpen = true;
                this.regionOpen = false;
                this.typeOpen = false;
                this.overlayOpen();
            },
            typeBtn() {
                this.filter = true;
                this.overlay = true;
                this.typeOpen = true;
                this.regionOpen = false;
                this.areaOpen = false;
                this.overlayOpen();
            },
            orderBtn(m, n, v) {
                this.page = 1;
                this.sort_type = m;
                this.sort = n;
                this.orderIndex = v;
                this.orederby = 'none';
                this.houseGet();
                this.overlayClose()
            },
            houseGetArea() {
                this.areaValueAfter = this.areaValue
                if(this.isareaActive == true){
                    this.areaID = ''
                    this.areaValueAfter = ''
                }
                this.page = 1;
                this.houseGet();
                this.overlayClose()
            },
            houseGetRegion() {
                this.cityFirst = this.cityFirstTmp;
                this.citySecond = this.citySecondTmp;
                this.cityFirstID = this.cityFirstIDBefore;
                this.citySecondID = this.citySecondIDBefore;
                 if(this.iscityActive == true){
                    this.cityFirst = '';
                    this.citySecond = '';
                    this.cityFirstID = '';
                    this.citySecondID = '';
                }
                this.page = 1;
                this.houseGet();
                this.overlayClose()
            },
            houseGetKey() {
                if(this.searchKey != '' && this.keyList.indexOf(this.searchKey) == -1){
                    this.keyList.push(this.searchKey)
                }
                localStorage.setItem('keyLandList',this.keyList)
                this.page = 1;
                this.houseGet();
            },
            getKey(v){
                this.searchKey = v;
                this.page = 1;
                this.houseGet();
            },
             clearKey(){
                localStorage.removeItem('keyLandList')
                this.keyList = []
            }
        }
    };
</script>

<style scoped>
    @import '../assets/css/sale-list.css';

    @keyframes lds-spinner {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes lds-spinner {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    .lds-css {background-color: #fff;text-align: center;padding: 13px 20px;}
    .lds-spinner {
        position: relative;
        margin: 0 auto;
    }
    .lds-spinner div {
        left: 94px;
        top: 44px;
        position: absolute;
        -webkit-animation: lds-spinner linear 1s infinite;
        animation: lds-spinner linear 1s infinite;
        background: #28292f;
        width: 12px;
        height: 32px;
        border-radius: 40%;
        -webkit-transform-origin: 6px 56px;
        transform-origin: 6px 56px;
    }
    .lds-spinner div:nth-child(1) {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .lds-spinner div:nth-child(2) {
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    .lds-spinner div:nth-child(3) {
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg);
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }
    .lds-spinner div:nth-child(4) {
        -webkit-transform: rotate(108deg);
        transform: rotate(108deg);
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }
    .lds-spinner div:nth-child(5) {
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }
    .lds-spinner div:nth-child(6) {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }
    .lds-spinner div:nth-child(7) {
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }
    .lds-spinner div:nth-child(8) {
        -webkit-transform: rotate(252deg);
        transform: rotate(252deg);
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }
    .lds-spinner div:nth-child(9) {
        -webkit-transform: rotate(288deg);
        transform: rotate(288deg);
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }
    .lds-spinner div:nth-child(10) {
        -webkit-transform: rotate(324deg);
        transform: rotate(324deg);
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
    .lds-spinner {
        width: 36px !important;
        height: 36px !important;
        -webkit-transform: translate(-18px, -18px) scale(0.18) translate(18px, 18px);
        transform: translate(-18px, -18px) scale(0.18) translate(18px, 18px);
    }
    .land-tag{
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 30px;
    	height: 25px;
    	line-height: 25px;
    	font-size: 12px;
    	color: #fff;
    	text-align: center;
    	border-top-left-radius: 3px;
    	border-bottom-right-radius: 3px;
    	background-color: #e62129;
    }
</style>
